<template>
  <q-card class="resume">
    <q-banner class="bg-primary text-white">
      <div class="full-width row justify-between">
        <div class="col-5 full-height self-center text-h6">个人简历列表</div>
        <div class="col-3">
          <q-file dense label="上传PDF简历" outlined accept=".pdf" :loading="isUploading" borderless ref="fileRef"
                  v-model="resumeFile" bg-color="primary" color="white" label-color="white"
                  @update:model-value="handleFileUpload">
            <template #loading>
              <q-spinner-hourglass class="q-mr-sm" />
              上传中...
            </template>
          </q-file>
        </div>
      </div>
    </q-banner>
    <q-card-section>
      <q-table flat bordered
               :rows="resumes" :columns="columns" row-key="id" hide-bottom virtual-scroll>
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              <div class="full-width text-left text-weight-bold">{{ col.label }}</div>
            </q-th>
          </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              <div v-if="col.name == 'action'" class="text-left">
                <q-btn-group>
                  <q-btn dense label="查看" @click="showResume(props.row)"/>
                  <q-btn dense label="删除" class="text-negative" @click="removeResume(props.row)"/>
                </q-btn-group>
              </div>
              <div v-else class="text-left">
                {{ props.row[col.name]}}
              </div>
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </q-card-section>
  </q-card>
</template>
<style scoped lang="sass">
.resume
  width: 600px
  height: 300px
  background-color: white
</style>
<script setup lang="ts">
import {JOB_SEEKER_ROLE, Resume} from "../vite-env.d";
import {onMounted, ref} from "vue";
import {HttpService} from "../assets/Http.ts";
import JobSeekerService from "../services/JobSeekerService.ts";
import {LocalStorageUtil} from "../assets/local-storage.ts";

const jobSeekerService = new JobSeekerService()
const resumes = ref<Resume[]>([])
const resumeFile = ref<File | null>(null)
const isUploading = ref(false);
const fileRef = ref(null)
const columns = [
    {name: "fileName", require: true, label: "文件名"},
    {name: "createdAt", require: true, label: "上传时间"},
    {name: "action", require: true, label: "操作"}
]
onMounted(async () => {
  await loadResumes();
});
const loadResumes = async () => {
  const {type, user} = await LocalStorageUtil.getCurrentUser()
  if (type === JOB_SEEKER_ROLE && user) {
    const data = await jobSeekerService.getResumePages(user?.id);
    if (data)
      resumes.value = data
  }
};
const removeResume = async (resume: Resume) => {
  await new Promise(resolve => setTimeout(resolve, 500)); // 模拟延迟
  const index = resumes.value.findIndex(r => r.id === resume.id);
  if (index !== -1) {
    resumes.value.splice(index, 1);
  }
}

const handleFileUpload = async (file: File) => {
  const {type, user} = await LocalStorageUtil.getCurrentUser()
  if (type === JOB_SEEKER_ROLE && user) {
    const formData = new FormData(); // 创建 FormData 对象来发送文件数据和表单数据
    formData.append('file', file);
    formData.append('job_seeker_id', user?.id)
    isUploading.value = true;
    await HttpService.post('/jobSeeker/uploadResume', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })
    await loadResumes();
    fileRef.value.removeFile(file)
    isUploading.value = false;
  }
}
const showResume = async (resume: Resume) => {
  const {type, user} = await LocalStorageUtil.getCurrentUser();
  if (type === JOB_SEEKER_ROLE && user) {
    HttpService.openFile("/jobSeeker/downloadResume", {
      job_seeker_id: user.id,
      resume_id: resume.id
    })
  }
}
</script>
